import React from "react";
import { Button, Input, Icon, Row, Col, DatePicker, Modal } from "antd";
import classnames from "classnames";
import { observer, inject } from "mobx-react";
import "./style.scss";

// const photo = require("../images/app_phone.png");
const { TextArea } = Input;

@inject("SideRightStore")
@observer
class MoreDetail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            id: "",
            showModalType: "",
            showDetail: false
        };
    }

    componentDidMount() {
        // getdata
        console.log("获取后台数据");
    }

    openNext = type => {
        if (!type) return;
        this.props.SideRightStore.updateStatus({ showModalType: type });
    };

    goBack = () => {
        console.log(123);
    };

    getCurTitle = () => {
        const {
            status: { showModalType, showDetail, showAdd },
            type
        } = this.props.SideRightStore;
        let title = type !== "People" ? "APP信息" : "个人信息";
        switch (showModalType) {
            case "order":
                title = "指令信息";
                if (showDetail) title = "指令详情";
                break;
            case "warning":
                title = "预警信息";
                break;
            case "event":
                title = "事件列表";
                if (showAdd) title = "新增事件";
                break;
            case "phone":
                title = "关联APP";
                if (showDetail) title = "展示APP详情";
                break;
            default:
                break;
        }
        return title;
    };

    deleteEvent = id => {
        console.log(id);
    };

    clickUpdateStatus = newStatus => {
        this.props.SideRightStore.updateStatus(newStatus);
    };

    close = () => {
        this.props.SideRightStore.updateStatus({ showModalType: "", showDetail: false });
        this.props.onCancel("moreDetail");
    };

    render() {
        const PEOPLE_DETAIL = [
            { text: "姓名", key: "name" },
            { text: "性别", key: "xb" },
            { text: "身份证", key: "sfzh" },
            { text: "手机", key: "sj" },
            { text: "加入管控时间", key: "gksj", chlidren: { text: "管控等级", key: "level" } }
        ];

        const APP_DETAIL = [
            { text: "APP名称", key: "name" },
            { text: "风险评分", key: "score" },
            { text: "APP类型", key: "type" },
            { text: "最近更新日期", key: "time" }
        ];

        // const data = {
        //     name: "刘中勇",
        //     xb: "男",
        //     sfzh: "2455674985255682456",
        //     sj: "18889898989",
        //     gksj: "2018-12-31 10:00:00",
        //     level: "A4"
        // };
        const statisticData = [
            { text: "指令", key: "order", icon: "", name: "相关指令" },
            { text: "预警", key: "warning", icon: "", name: "预警信息" },
            { text: "事件", key: "event", icon: "", name: "相关事件" },
            { text: "APP", key: "phone", icon: "", name: "关联APP" }
        ];

        const APP_TABLE_LSIT = [
            { name: "管控周期", key: "gkzq", name2: "使用人群数量", ke2: "crowdCount" },
            { name: "加入管控时间", key: "gksj", name2: "关联对象数量", key2: "relatedCount" },
            { name: "评论信息数量", key: "commontCount", cols: true }
        ];

        const PEOPLE_TABLE_LSIT = [
            { name: "管控周期", key: "gkzq", name2: "加入管控时间", key2: "gksj" },
            { name: "所属行政区域", key: "controlArea", name2: "责任民警", key2: "police" },
            { name: "责任单位", key: "controlArea", name2: "责任人手机", key2: "police" },
            { name: "住址", key: "commontCount", name2: "有无犯罪前科", key2: "commontCount" }
        ];

        const {
            status: { showModalType, showDetail, showAdd, showEdit },
            type,
            curCard
        } = this.props.SideRightStore;
        const styles = classnames({
            "dayu-dialog": !showModalType,
            "custome-header": showModalType === "order",
            "custome-width": !showModalType
        });

        const details = type !== "People" ? APP_DETAIL : PEOPLE_DETAIL;
        const tablelist = type !== "People" ? APP_TABLE_LSIT : PEOPLE_TABLE_LSIT;

        return (
            <Modal
                visible
                className={styles}
                title={this.getCurTitle()}
                cancelText="取消"
                okText="确认"
                onOk={this.props.onOk}
                onCancel={() => this.close()}
                style={{ width: 720 }}
                footer={false}
            >
                {!showModalType && (
                    <div className="personal-info">
                        <div className="personal-header">
                            <div className="personal-photo">
                                <img src={curCard.logo} alt="人物头像" style={{ width: 110, height: 150 }} />
                            </div>
                            <div className="personal-detail">
                                {details.map(item => (
                                    <Row key={`${item.key}`} className="personal-row">
                                        <Col span={6}>{`${item.text}:`}</Col>
                                        {item.chlidren ? (
                                            <Col span={18}>
                                                <span>{curCard[item.key]}</span>
                                                <div className="personal-row-level">
                                                    <label>{item.chlidren.text}</label>
                                                    <span className="span-text">{curCard[item.chlidren.key]}</span>
                                                    <Button
                                                        ghost
                                                        className="mod-btn"
                                                        onClick={() =>
                                                            this.clickUpdateStatus({ showModalType: "modify" })
                                                        }
                                                    >
                                                        修改
                                                    </Button>
                                                </div>
                                            </Col>
                                        ) : (
                                            <Col span={18}>{curCard[item.key]}</Col>
                                        )}
                                    </Row>
                                ))}
                            </div>
                        </div>
                        <div className="control-info">
                            <table id="testtable" border="1" width="100%">
                                <tbody>
                                    {tablelist.map((item, index) =>
                                        item.cols ? (
                                            <tr key={`tr-${index}`}>
                                                <td style={{ width: "20%" }}>{item.name}</td>
                                                <td colSpan={3}>{item.key}</td>
                                            </tr>
                                        ) : (
                                            <tr key={`tr-${index}`}>
                                                <td style={{ width: "20%" }}>{item.name}</td>
                                                <td style={{ width: "30%" }}>{item.key}</td>
                                                <td>{item.name2}</td>
                                                <td>{item.key2}</td>
                                            </tr>
                                        )
                                    )}
                                </tbody>
                            </table>
                        </div>
                        <div className="personal-statistic">
                            {statisticData.map(item => (
                                <div key={`statistic${item.text}`} className="statistic-item">
                                    <i className={`statistic-img ${item.key}`} />
                                    <div className="statisic-text">
                                        <p>3</p>
                                        <p>{item.text}</p>
                                    </div>
                                    <div className="statistic-tag" onClick={() => this.openNext(item.key)}>
                                        <i className="light" />
                                        <span>20</span>
                                    </div>
                                </div>
                            ))}
                        </div>
                        <div className="personal-btns">
                            {statisticData.map(item => (
                                <Button
                                    key={`btn-${item.key}`}
                                    className={`statistic-btn ${item.key}`}
                                    onClick={() => this.openNext(item.key)}
                                    ghost
                                >
                                    {item.name}
                                </Button>
                            ))}
                        </div>
                    </div>
                )}
                {showModalType === "order" &&
                    (!showDetail ? (
                        <div className="order-info">
                            <div className="order-header">
                                <i className="order-user" />
                                <label>目标人物</label>
                                <span>张晓国</span>
                            </div>
                            <div className="order-content">
                                <Row className="order-row">
                                    <Col span={6}>下达人</Col>
                                    <Col span={6}>反馈状态</Col>
                                    <Col span={6}>指令下达时间</Col>
                                    <Col span={6}>操作</Col>
                                </Row>
                                <div className="order-list">
                                    <Row className="order-row">
                                        <Col span={6}>下达人</Col>
                                        <Col span={6}>下达人</Col>
                                        <Col span={6}>下达人</Col>
                                        <Col span={6} className="order-col">
                                            <div
                                                className="col-content"
                                                onClick={() => this.clickUpdateStatus({ showDetail: true })}
                                            >
                                                <i className="detail" />
                                                <span>详情</span>
                                            </div>
                                        </Col>
                                    </Row>
                                </div>
                            </div>
                            <div className="info-footer">
                                <Button
                                    ghost
                                    className="back-btn"
                                    onClick={() => this.clickUpdateStatus({ showModalType: "" })}
                                >
                                    返回
                                </Button>
                            </div>
                        </div>
                    ) : (
                        <div className="order-info">
                            <div className="detail-header">
                                <span>目标</span>
                            </div>
                            <p className="detail-user">刘中勇</p>
                            <div className="detail-info">
                                <Row>
                                    <Col span={6}>下达人：</Col>
                                    <Col span={18}>:admin</Col>
                                </Row>
                            </div>
                            <div className="info-footer">
                                <Button
                                    ghost
                                    className="back-btn"
                                    onClick={() => this.clickUpdateStatus({ showDetail: false })}
                                >
                                    返回
                                </Button>
                            </div>
                        </div>
                    ))}
                {showModalType === "warning" && (
                    <div className="">
                        {showModalType === "warning" && (
                            <div className="warning-detail">
                                <div className="data-list">
                                    <div className="row">
                                        <div className="title">这里是头部</div>
                                        <div className="tail" />
                                        <div className="icon">
                                            <span />
                                        </div>
                                        <div className="content">this is content</div>
                                    </div>
                                    <div className="row">
                                        <div className="title">这里是头部</div>
                                        <div className="tail last-tail" />
                                        <div className="icon">
                                            <span />
                                        </div>
                                        <div className="content">this is content</div>
                                    </div>
                                </div>
                                <div className="info-footer">
                                    <Button
                                        ghost
                                        className="back-btn"
                                        onClick={() => this.clickUpdateStatus({ showModalType: "" })}
                                    >
                                        返回
                                    </Button>
                                </div>
                            </div>
                        )}
                    </div>
                )}
                {showModalType === "event" && (
                    <div className="event-info">
                        {/* 这里有setps列表，新增，编辑 */}
                        {!showAdd ? (
                            <div className="data-list">
                                <div className="row">
                                    <div className="title">
                                        <span>事件发生日期事件</span>
                                        {showEdit && <Button onClick={() => this.deleteEvent()}>删除</Button>}
                                    </div>
                                    <div className="tail" />
                                    <div className="icon">
                                        <span />
                                    </div>
                                    <div className="content">this is content</div>
                                </div>

                                <div className="row">
                                    <div className="title">这里是头部</div>
                                    <div className="tail last-tail" />
                                    <div className="icon">
                                        <span />
                                    </div>
                                    <div className="content">this is content</div>
                                </div>
                            </div>
                        ) : (
                            <div className="event-add">
                                <div className="detail-header">
                                    <span>事件日期</span>
                                </div>
                                <div className="detail-user">
                                    <DatePicker onChange={this.onChange} />
                                </div>
                                <div className="detail-header">
                                    <span>事件内容</span>
                                </div>
                                <div className="detail-user">
                                    <TextArea rows={4} />
                                </div>
                            </div>
                        )}
                        <div className="info-footer">
                            {!showAdd && (
                                <Button
                                    ghost
                                    className="back-btn edit"
                                    onClick={() => this.clickUpdateStatus({ showEdit: !showEdit })}
                                >
                                    {!showEdit ? "编辑" : "取消编辑"}
                                </Button>
                            )}
                            {!showAdd && (
                                <Button
                                    ghost
                                    className="back-btn add"
                                    onClick={() => this.clickUpdateStatus({ showAdd: true })}
                                >
                                    新增
                                </Button>
                            )}
                            <Button
                                ghost
                                className="back-btn"
                                onClick={() =>
                                    showAdd
                                        ? this.clickUpdateStatus({ showAdd: false })
                                        : this.clickUpdateStatus({ showModalType: "" })
                                }
                            >
                                返回
                            </Button>
                        </div>
                    </div>
                )}
                {showModalType === "phone" &&
                    (!showDetail ? (
                        <div className="order-info">
                            <div className="detail-header">
                                <span>目标</span>
                            </div>
                            <p className="detail-user">刘中勇</p>
                            <div className="order-content">
                                <Row className="order-row">
                                    <Col span={6}>下达人</Col>
                                    <Col span={6}>反馈状态</Col>
                                    <Col span={6}>指令下达时间</Col>
                                    <Col span={6}>操作</Col>
                                </Row>
                                <div className="order-list">
                                    <Row className="order-row">
                                        <Col span={6}>下达人</Col>
                                        <Col span={6}>下达人</Col>
                                        <Col span={6}>下达人</Col>
                                        <Col span={6} className="order-col">
                                            <div
                                                className="col-content"
                                                onClick={() => this.clickUpdateStatus({ showDetail: true })}
                                            >
                                                <i className="detail" />
                                                <span>详情</span>
                                            </div>
                                        </Col>
                                    </Row>
                                </div>
                            </div>
                            <div className="info-footer">
                                <Button
                                    ghost
                                    className="back-btn"
                                    onClick={() => this.clickUpdateStatus({ showModalType: "" })}
                                >
                                    返回
                                </Button>
                            </div>
                        </div>
                    ) : (
                        <div className="order-info">
                            <div className="detail-header">
                                <span>目标</span>
                            </div>
                            <p className="detail-user">刘中勇</p>
                            <div className="detail-info">
                                <Row>
                                    <Col span={6}>下达人：</Col>
                                    <Col span={18}>:admin</Col>
                                </Row>
                            </div>
                            <div className="info-footer">
                                <Button
                                    ghost
                                    className="back-btn"
                                    onClick={() => this.clickUpdateStatus({ showDetail: false })}
                                >
                                    返回
                                </Button>
                            </div>
                        </div>
                    ))}
                {showModalType === "modify" && (
                    <div className="order-info">
                        <div className="detail-header">
                            <span>目标人物</span>
                        </div>
                        <p className="detail-user">刘中勇</p>
                        <div className="detail-header">
                            <span>管控级别</span>
                        </div>
                        <div className="level-star">
                            {[1, 2, 3, 4, 5, 6, 7, 8].map(item => (
                                <Icon
                                    type="star"
                                    key={`a${item}`}
                                    theme={`${item <= this.state.level || 0 ? "filled" : ""}`}
                                    className="star-c"
                                    style={{ color: "#ff5858" }}
                                    onClick={() => this.setLevelStar("A", item)}
                                />
                            ))}
                            <span
                                className="span-c"
                                style={{
                                    color: "#ff5858",
                                    border: "1px solid #ff5858"
                                }}
                            >{`A${this.state.level}`}</span>
                        </div>
                        <div className="info-footer">
                            <Button
                                ghost
                                className="back-btn"
                                onClick={() => this.clickUpdateStatus({ showModalType: "" })}
                            >
                                返回
                            </Button>
                        </div>
                    </div>
                )}
            </Modal>
        );
    }
}

export default MoreDetail;
